<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>BOM - 浏览器对象模型完全指南</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="https://cdn.staticfile.org/tailwindcss/2.2.19/tailwind.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.min.js"></script>
    <style>
        body {
            font-family: 'Noto Sans SC', Tahoma, Arial, Roboto, "Droid Sans", "Helvetica Neue", "Droid Sans Fallback", "Heiti SC", "Hiragino Sans GB", Simsun, sans-serif;
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            min-height: 100vh;
        }
        
        .hero-gradient {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }
        
        .card-hover {
            transition: all 0.3s ease;
        }
        
        .card-hover:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 40px rgba(0,0,0,0.1);
        }
        
        .code-block {
            background: #1e1e1e;
            color: #d4d4d4;
            border-radius: 8px;
            padding: 1.5rem;
            overflow-x: auto;
            font-family: 'Consolas', 'Monaco', monospace;
        }
        
        .section-title {
            position: relative;
            padding-left: 1rem;
        }
        
        .section-title::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            width: 4px;
            background: linear-gradient(180deg, #667eea 0%, #764ba2 100%);
            border-radius: 2px;
        }
        
        .feature-card {
            background: rgba(255, 255, 255, 0.9);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
        }
        
        .mermaid {
            display: flex;
            justify-content: center;
            margin: 2rem 0;
        }
        
        .drop-cap {
            float: left;
            font-size: 4rem;
            line-height: 1;
            font-weight: 700;
            margin-right: 0.5rem;
            color: #667eea;
            font-family: 'Noto Serif SC', serif;
        }
    </style>
</head>
<body>
    <!-- Hero Section -->
    <section class="hero-gradient text-white py-20">
        <div class="container mx-auto px-6 text-center">
            <h1 class="text-5xl md:text-6xl font-bold mb-4 animate-pulse">
                <i class="fas fa-window-maximize mr-4"></i>BOM
            </h1>
            <p class="text-2xl mb-2">浏览器对象模型</p>
            <p class="text-xl opacity-90">Browser Object Model</p>
            <div class="mt-8 flex justify-center space-x-8">
                <div class="text-center">
                    <i class="fas fa-clock text-3xl mb-2"></i>
                    <p>定时器</p>
                </div>
                <div class="text-center">
                    <i class="fas fa-cookie-bite text-3xl mb-2"></i>
                    <p>Cookie</p>
                </div>
                <div class="text-center">
                    <i class="fas fa-cube text-3xl mb-2"></i>
                    <p>对象创建</p>
                </div>
                <div class="text-center">
                    <i class="fas fa-window-restore text-3xl mb-2"></i>
                    <p>Window对象</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Main Content -->
    <main class="container mx-auto px-6 py-12">
        <!-- Introduction -->
        <div class="feature-card rounded-lg shadow-xl p-8 mb-12 card-hover">
            <p class="text-lg leading-relaxed">
                <span class="drop-cap">B</span>OM 使 JavaScript 有能力与浏览器"对话"。它是 JavaScript 与浏览器窗口交互的接口，让我们能够控制浏览器窗口、处理用户交互、管理浏览历史等。通过 BOM，我们可以实现定时器、弹出框、页面跳转等丰富的功能。
            </p>
        </div>

        <!-- BOM Architecture Diagram -->
        <div class="feature-card rounded-lg shadow-xl p-8 mb-12">
            <h2 class="text-3xl font-bold mb-6 section-title">BOM 架构图</h2>
            <div class="mermaid">
                graph TD
                    A[Window 对象] --> B[Document]
                    A --> C[Location]
                    A --> D[History]
                    A --> E[Navigator]
                    A --> F[Screen]
                    A --> G[定时器]
                    G --> H[setTimeout]
                    G --> I[setInterval]
                    A --> J[弹出框]
                    J --> K[alert]
                    J --> L[confirm]
                    J --> M[prompt]
                    
                    style A fill:#667eea,stroke:#fff,stroke-width:3px,color:#fff
                    style G fill:#764ba2,stroke:#fff,stroke-width:2px,color:#fff
                    style J fill:#764ba2,stroke:#fff,stroke-width:2px,color:#fff
            </div>
        </div>

        <!-- Window Object -->
        <section class="mb-16">
            <div class="feature-card rounded-lg shadow-xl p-8 card-hover">
                <h2 class="text-3xl font-bold mb-6 section-title">
                    <i class="fas fa-window-maximize mr-3 text-purple-600"></i>Window 对象
                </h2>
                <div class="prose max-w-none">
                    <p class="text-lg mb-4">所有浏览器都支持 window 对象。它表示浏览器窗口，是 JavaScript 的全局对象。</p>
                    
                    <div class="grid md:grid-cols-2 gap-6 mt-8">
                        <div class="bg-purple-50 p-6 rounded-lg">
                            <h3 class="text-xl font-semibold mb-3 text-purple-800">
                                <i class="fas fa-info-circle mr-2"></i>核心特性
                            </h3>
                            <ul class="space-y-2">
                                <li><i class="fas fa-check text-purple-600 mr-2"></i>所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员</li>
                                <li><i class="fas fa-check text-purple-600 mr-2"></i>全局变量是 window 对象的属性</li>
                                <li><i class="fas fa-check text-purple-600 mr-2"></i>全局函数是 window 对象的方法</li>
                                <li><i class="fas fa-check text-purple-600 mr-2"></i>HTML DOM 的 document 也是 window 对象的属性之一</li>
                            </ul>
                        </div>
                        
                        <div class="bg-indigo-50 p-6 rounded-lg">
                            <h3 class="text-xl font-semibold mb-3 text-indigo-800">
                                <i class="fas fa-code mr-2"></i>常用示例
                            </h3>
                            <div class="code-block text-sm">
                                <pre>// 这些调用是等价的
alert("Hello");
window.alert("Hello");

// document 是 window 的属性
document.getElementById("demo");
window.document.getElementById("demo");

// parseInt 是 window 的方法
parseInt("10");
window.parseInt("10");</pre>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- Window Properties -->
        <section class="mb-16">
            <div class="grid md:grid-cols-3 gap-8">
                <!-- Location -->
                <div class="feature-card rounded-lg shadow-xl p-6 card-hover">
                    <div class="text-center mb-4">
                        <i class="fas fa-map-marker-alt text-4xl text-purple-600"></i>
                    </div>
                    <h3 class="text-2xl font-bold mb-4 text-center">window.location</h3>
                    <p class="mb-4">Location 属性用于存储当前页面 URL 信息，可以实现页面跳转和刷新。</p>
                    <div class="code-block text-sm">
                        <pre>// 页面跳转
window.location.href = "http://www.baidu.com";
window.location = "http://www.baidu.com";

// 重新加载页面
location.reload();</pre>
                    </div>
                </div>

                <!-- History -->
                <div class="feature-card rounded-lg shadow-xl p-6 card-hover">
                    <div class="text-center mb-4">
                        <i class="fas fa-history text-4xl text-indigo-600"></i>
                    </div>
                    <h3 class="text-2xl font-bold mb-4 text-center">window.history</h3>
                    <p class="mb-4">操作同一个浏览器会话中的已访问页面，实现前进、后退功能。</p>
                    <div class="code-block text-sm">
                        <pre>// 返回上一页
history.back();
history.go(-1);

// 前进到下一页
history.forward();
history.go(1);

// 刷新当前页面
history.go(0);</pre>
                    </div>
                </div>

                <!-- Open -->
                <div class="feature-card rounded-lg shadow-xl p-6 card-hover">
                    <div class="text-center mb-4">
                        <i class="fas fa-external-link-alt text-4xl text-pink-600"></i>
                    </div>
                    <h3 class="text-2xl font-bold mb-4 text-center">window.open()</h3>
                    <p class="mb-4">打开新的浏览器窗口或标签页，可以指定窗口名称和特性。</p>
                    <div class="code-block text-sm">
                        <pre>// 打开新窗口
window.open("http://www.baidu.com", "baidu");

// 带参数的打开
window.open(url, name, features);</pre>
                    </div>
                </div>
            </div>
        </section>

        <!-- Dialog Boxes -->
        <section class="mb-16">
            <div class="feature-card rounded-lg shadow-xl p-8">
                <h2 class="text-3xl font-bold mb-6 section-title">
                    <i class="fas fa-comment-dots mr-3 text-purple-600"></i>弹出框
                </h2>
                
                <div class="grid md:grid-cols-3 gap-6 mt-8">
                    <div class="bg-red-50 p-6 rounded-lg border-2 border-red-200">
                        <h3 class="text-xl font-semibold mb-3 text-red-800">
                            <i class="fas fa-exclamation-triangle mr-2"></i>警告框 Alert
                        </h3>
                        <p class="mb-4">用于确保用户可以得到某些信息。用户需要点击确定按钮才能继续。</p>
                        <div class="code-block text-sm">
                            <pre>alert("这是一个警告信息！");</pre>
                        </div>
                    </div>
                    
                    <div class="bg-blue-50 p-6 rounded-lg border-2 border-blue-200">
                        <h3 class="text-xl font-semibold mb-3 text-blue-800">
                            <i class="fas fa-question-circle mr-2"></i>确认框 Confirm
                        </h3>
                        <p class="mb-4">让用户验证或接受某些信息。返回 true（确定）或 false（取消）。</p>
                        <div class="code-block text-sm">
                            <pre>if (confirm("确定要删除吗？")) {
    // 用户点击了确定
}</pre>
                        </div>
                    </div>
                    
                    <div class="bg-green-50 p-6 rounded-lg border-2 border-green-200">
                        <h3 class="text-xl font-semibold mb-3 text-green-800">
                            <i class="fas fa-keyboard mr-2"></i>提示框 Prompt
                        </h3>
                        <p class="mb-4">提示用户输入某个值。返回输入的值或 null（取消）。</p>
                        <div class="code-block text-sm">
                            <pre>var name = prompt("请输入您的名字", "默认值");</pre>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- Timers -->
        <section class="mb-16">
            <div class="feature-card rounded-lg shadow-xl p-8">
                <h2 class="text-3xl font-bold mb-6 section-title">
                    <i class="fas fa-clock mr-3 text-purple-600"></i>定时器（重要）
                </h2>
                
                <div class="grid md:grid-cols-2 gap-8 mt-8">
                    <div class="bg-gradient-to-br from-purple-100 to-pink-100 p-6 rounded-lg">
                        <h3 class="text-2xl font-semibold mb-4">
                            <i class="fas fa-hourglass-half mr-2 text-purple-600"></i>setTimeout
                        </h3>
                        <p class="mb-4">在指定的